import { storeToRefs } from 'pinia'
import { useThemeStore } from '@/stores/theme'
import { getDarkColor, getLightColor } from '@/utils/color'

export function useTheme() {
  const themeStore = useThemeStore()
  const { primaryColor, themeMode, baseRadius, layout } = storeToRefs(themeStore)

  /**
   * 修改主题 primary 颜色
   * @param {String} color primary 颜色
   */
  const setPrimaryColor = (color) => {
    document.documentElement.style.setProperty('--el-color-primary', color)
    document.documentElement.style.setProperty('--color-primary', color)
    for (let i = 1; i <= 9; i++) {
      const primary = themeMode.value === 'dark' ? `${getDarkColor(color, i / 10)}` : `${getLightColor(color, i / 10)}`
      document.documentElement.style.setProperty(`--color-primary-gradient-${i}`, primary)
    }
  }

  /**
   * 设置主题
   * @param {String} mode 主题: light | dark
   */
  const setTheme = (mode) => {
    const html = document.documentElement
    html.setAttribute('class', mode)
    themeMode.value = mode

    setPrimaryColor(primaryColor.value)
  }

  /**
   * 设置圆角
   * @param {Number} num 建议 0 ~ 1，默认 0.25，单位 rem
   */
  const setRadius = (num = 0.25) => {
    baseRadius.value = num
    document.documentElement.style.setProperty('--base-radius', `${baseRadius.value}rem`)
    document.documentElement.style.setProperty('--el-border-radius-base', `${baseRadius.value}rem`)
  }

  /**
   * 设置基础字体大小
   * @param {Number} num 默认 16，单位 px
   */
  const setFontSize = (num = 16) => {
    document.documentElement.style.setProperty('--base-font-size', `${num}px`)
  }

  /**
   * 一键初始化主题风格
   */
  const initTheme = () => {
    setTheme(themeMode.value)
    setRadius(baseRadius.value)
  }

  return {
    setPrimaryColor,
    setTheme,
    initTheme,
    setRadius,
    setFontSize,
  }
}
